﻿<!DOCTYPE html>

<html>

	<head>

		<meta name=viewport content="user-scalable=no,width=device-width" />

		<link rel=stylesheet href=css/jquery.mobile.css />
		<script src=jquery/jquery.js></script>
		<script src=jquery/jquery.mobile.js></script>

		<style type="text/css">
			div[data-role=navbar] .ui-btn .ui-btn-inner {

				padding-top: 50px;
			}

			div[data-role=navbar] .ui-btn .ui-icon {

				width: 40px;
				height: 40px;
				margin-left: -20px;
			}

			#remote .ui-icon {

				background: url(css/images/glyphisch/26-bandaid.png) 50% 50% no-repeat;
			}

			#light .ui-icon {

				background: url(css/images/glyphisch/84-lightbulb.png) 50% 50% no-repeat;
			}

		</style>

		<style type='text/css'>
			<!--
			html { background-color: #ccc; }
			@media only screen and (min-width: 800px){
			.ui-page {
			width: 600px !important;
			margin: 0 auto !important;
			position: relative !important;
			border-right: 5px #666 outset !important;
			border-left: 5px #666 outset !important;
			}
			.ui-footer {
			max-width: 600px;
			margin: 0 auto;
			}
			}
			-->
		</style>

	</head>

	<body>

		<div data-role=page id=home data-theme=b>

			<div data-role=header>

				<h1>Home</h1>

			</div>

			<div data-role=content style="text-align: center">

				<h1>Willkommen in meiner Schaltzentrale</h1>
				<div data-role=navbar data-grid=a>
					<ul>
						<li>
							<a href=lightmanager.php data-icon=custom id=light data-role="button" data-inline="true" data-iconpos=top data-ajax=false>Lichtsteuerung</a>
						</li>
						<li>
							<a href="#popupDialog" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" id=remote data-transition="fade" data-iconpos=top data-icon=custom >Remote Control</a>
						</li>
					</ul>
				</div>
				<div data-role=navbar data-grid=a>
					<ul>
						<li>
							<a href=test_tablet.html id=light data-role="button" data-inline="true" data-iconpos=top data-ajax=false>Tablet Wohnzimmer</a>
						</li>
						<li>
							<a href=lightmanager_restart.php id=light data-role="button" data-inline="true" data-iconpos=top data-ajax=false>Restart Backend</a>
						</li>
					</ul>
				</div>
			</div>

			<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
				<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
				<div data-role="header" data-theme="a" class="ui-corner-top">
					<h1>Remote Control</h1>
				</div>
				<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
					<h3 class="ui-title">not yet implemented</h3>

				</div>
			</div>

		</div>

	</body>

</html>